<script>

import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";

export default {
  components: {KtIcon},
  data() {
    return {
      iconSize: "50px"
    }
  },
  created() {
  },
  mounted() {

  },
}
</script>

<template>
  <div class="box">
        <el-card class="in-card">
            <div>
              <kt-icon
                  :size="iconSize"
                  icon="ant-icon-appstore-outlined"></kt-icon>
            </div>
            <div class="in-card-title">
              <div>Create Project</div>
            </div>
            <div class="in-card-number">
              <div>8</div>
            </div>
        </el-card>
        <el-card class="in-card">
          <div>
            <kt-icon
                :size="iconSize"
                icon="ant-icon-api-outlined"></kt-icon>
          </div>
          <div class="in-card-title">
            <div>Number of access devices</div>
          </div>
          <div class="in-card-number">
            <div>8</div>
          </div>
        </el-card>
        <el-card class="in-card">
          <div>
            <kt-icon
                :size="iconSize"
                icon="AntIconClusterOutlined"></kt-icon>
          </div>
          <div class="in-card-title">
            <div>Number of sensors</div>
          </div>
          <div class="in-card-number">
            <div>31</div>
          </div>
        </el-card>
        <el-card class="in-card">
          <div>
            <kt-icon
                :size="iconSize"
                icon="ant-icon-select-outlined"></kt-icon>
          </div>
          <div class="in-card-title">
            <div>Number of trigged</div>
          </div>
          <div class="in-card-number">
            <div>8</div>
          </div>
        </el-card>
        <el-card class="in-card">
          <div>
            <kt-icon
                :size="iconSize"
                icon="ant-icon-idcard-outlined"></kt-icon>
          </div>
          <div class="in-card-title">
            <div>Sub-account user</div>
          </div>
          <div class="in-card-number">
            <div>8</div>
          </div>
        </el-card>
        <el-card class="in-card">
          <div>
            <kt-icon
                :size="iconSize"
                icon="ant-icon-warning-outlined"></kt-icon>
          </div>
          <div class="in-card-title">
            <div>All events</div>
          </div>
          <div class="in-card-number">
            <div>100%</div>
          </div>
        </el-card>
        <el-card class="in-card">
          <div>
            <kt-icon
                :size="iconSize"
                icon="ant-icon-api-filled"></kt-icon>
          </div>
          <div class="in-card-title">
            <div>Offline devices</div>
          </div>
          <div class="in-card-number">
            <div>0/8</div>
          </div>
        </el-card>
        <el-card class="in-card">
          <div>
            <kt-icon
                :size="iconSize"
                icon="ant-icon-alert-outlined"></kt-icon>
          </div>
          <div class="in-card-title">
            <div>Today total active alarm</div>
          </div>
          <div class="in-card-number">
            <div>0/0</div>
          </div>
        </el-card>
  </div>
</template>

<style scoped lang="scss">
.box{
  text-align: center;
}

.in-card{
  text-align: center;
  margin: 20px;
  width: 360px;
  display: inline-block;
  .in-card-title{
    font-size: 16px;
  }
  .in-card-number{
    margin-top: 10px;
    font-size: 30px;
    font-weight: bold;
  }
}
</style>